﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="enjoymentLife.aspx.cs" Inherits="WebSite.cn.service.enjoymentLife" %>


<%@ Register src="/cn/head.ascx" tagname="head" tagprefix="uc1" %>
<%@ Register src="/cn/bottom.ascx" tagname="bottom" tagprefix="uc2" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
         <title><%=WebSite.info.info1("", "shoptitle")%></title>
    <meta name="Description" content="<%=WebSite.info.info1("","shopcontent")%>" /> 
    <meta name="Keywords" content="<%=WebSite.info.info1("","shopkey")%>" />
    <style type="text/css">
   <!--

.htmer_img{
   filter:alpha(opacity=80); /* IE */
   -moz-opacity:0.8; /* Moz + FF */
   opacity:0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
}
.htmer_img_none{
}


.card_banner_01{ width:980px; background:url(/cn/serviceImages/life.jpg) 0 0px no-repeat;  height:252px; }




.body_02{ width:980px; margin-top:20px; }
.body_02 .text_left_top { width:680px; float:left; }
.body_02 .text_button{width:680px; height:220px; border:0; background-color:#F3F1F1;  text-align:left; float:left; }
.body_02 .text_button ul{  font-size:12px; padding-left:5px;}
.body_02 .text_button li{ line-height:31px; list-style-type:disc;}
.body_02 .text_button .title{ background:url(/cn/serviceImages/birthday_title_bg.jpg); height:30px; padding-bottom:20px; }
.body_02 .text_button .body .text_01{ width:195px; float:left;  padding:0px 15px;  border-right:1px dotted #DCDCDC; }
.body_02 .text_button .body .text_02{ width:195px; float:left; padding:0px 15px; border-right:1px dotted #DCDCDC; }
.body_02 .text_button .body .text_03{ width:190px; float:left; padding:0px 15px;}
.body_02 .text_button .body .time{ float:right; color:#666; }
.body_02 .left_01{ width:680px; float:left;}
.body_02 .right_01{ width:290px; float:right;text-align:left;  background-color:#EDECEC; height:526px;  }
.body_02 .right_01 img{ height:188px;}
.body_02 .right_01 div{  padding-left:8px; }
.body_02 .right_01 div li{ padding-bottom:20px;}


.text_input{float:left; margin:5px 0 0 40px; text-align:left;}

.content .card_list .left{ padding-left:10px;  }
.content .card_list{width:248px; height:300px; float:left;  }
.content .card_list .pic img{ width:200px; height:200px;margin-top:10px;  text-align:center;  }
.content .card_list .right{ float:left; padding-left:20px; font-size:14px; font-weight:bold; margin-top:10px; color:#333;}
.content .card_list .buttom_01{ float:left; font-size:18px; font-weight:bold; color:#D6133D; margin-top:10px;}
.content .card_list .buttom_points{ float:left;margin-top:5px;}
.content  .card_01{background:#23B7CD; margin-right:3px;}
.content  .card_02{background:#702D97;}
.content  .card_03{background:#FFAE00; float:right;}
.right_01_title{ line-height:30px;  font-size:16px; font-weight:bold; padding-top:5px; padding-left:10px; }



#tabbed_box_1 {
	margin: 0px auto 0px auto;
	width:980px;
}


.tabbed_area {

	padding:8px 0px;
	width:100%;	
}

ul.tabs {
	margin:0px; padding:0px;
	margin-top:5px;
	margin-bottom:6px;
	color:#fff;
}
ul.tabs li {

  margin-left:30px;
  line-height:30px;
   list-style-type:disc;
   text-align:left;

}
ul.tabs li a {
	
	color:#eee;
	padding:8px 14px 8px 14px;
	text-decoration:none;
	font-size:12px;
	
     border-bottom:0px;

}
ul.tabs li a:hover {

	border-color:#2f343a;
	width:190px;
}
ul.tabs li a.active {

	color:#fff;
	width:190px;

}
.tab_left{ float:left; width:220px;  background-color:#EA5169; height:300px;}
.tab_right{ float:right;}
.content {
	background-color:#ffffff;
	padding:0px;
	border:0px solid #464c54; 
	width:750px;
	height:280px;	
  
}
#content_2, #content_3,#content_4, #content_5 { display:none; }

.content ul {
	margin:0px;
	padding:0px 20px 0px 20px;
}
.content ul li {

	padding-top:15px;
	padding-bottom:15px;
	font-size:13px;
    
     
  
}
.content ul li:last-child {
	border-bottom:none;
}
.content ul li a {
	text-decoration:none;
	color:#eee;
}

.content ul li a:hover {
	color:#fff;
}
.tab_left_title{ background:url(/cn/serviceImages/life_tab_left_top.jpg); width:165px; height:40px;  margin-top:10px;}
.div_link{ padding-left:26px; }
.div_link input{ width:180px;}
.div_link span{ color:#aaa; font-size:16px;}                     
.user_submit{ text-align:center; margin-top:10px;}
.user_submit img{ cursor:pointer; }
.tabs a{ cursor:pointer;}

-->
</style>

          <script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>

       <script type="text/javascript">

           // When the document loads do everything inside here ...
           $( document ).ready( function () {

               // When a link is clicked
               $( "a.tab" ).click( function () {


                   // switch all tabs off
                   $( ".active" ).removeClass( "active" );

                   // switch this tab on
                   $( this ).addClass( "active" );

                   //                   // slide all content up
                   $( ".content" ).slideUp();

                   //                   // slide this content up
                   var content_show = $( this ).attr( "title" );
                   $( "#" + content_show ).slideDown();

               } );

           } );


           function controllenght( id ) {
               var txt = $( id );
               if ( txt.val().length > 800 )//这里控制maxlenght
               {
                   alert( "输入内容已超过最大长度！" );
                   return;
               }
           }


           function investSubmit() {


               if ( $( "#TextBox1" ).val() == "" && $( "#TextBox2" ).val() == "" && $( "#TextBox3" ).val() == "" && $( "#TextBox4" ).val() == "" && $( "#TextBox5" ).val() == "" ) {

                   alert( "问题分类至少要填一项！" );

                   return false;
               }
               if ( $( "#TextBox1" ).val().length > 1000 ) {
                   alert( "操作不方便输入文字太多！" );
                   return false;
               }
               if ( $( "#TextBox2" ).val().length > 1000 ) {
                   alert( "商品不丰富输入文字太多！" );
                   return false;
               }
               if ( $( "#TextBox3" ).val().length > 1000 ) {
                   alert( "界面与访问速度输入文字太多！" );
                   return false;
               }
               if ( $( "#TextBox4" ).val().length > 1000 ) {
                   alert( "价格与配送输入文字太多！" );
                   return false;
               }
               if ( $( "#TextBox5" ).val().length > 1000 ) {
                   alert( "提建议输入文字太多！" );
                   return false;
               }




               $.ajax( {
                   type: "POST",
                   url: "/investHanlder.ashx",
                   data: "a=" + escape( $( "#TextBox1" ).val() )
            + "&b=" + escape( $( "#TextBox2" ).val() ) + "&c=" + escape( $( "#TextBox3" ).val() )
             + "&d=" + escape( $( "#TextBox4" ).val() )
             + "&e=" + escape( $( "#TextBox5" ).val() )
             + "&f=" + escape( $( "#txtLinkWay" ).val() ),
                   success: function ( msg ) {
                       if ( msg == "1" ) {
                           alert( "您的反馈提交成功，感谢您的反馈！" );
                           setTimeout( "parent.location.reload()", 2000 );

                       }
                       else {
                           alert( "提交反馈失败！" );
                           return false;
                       }

                   }
               } );
               return false;
           } 

  </script>

  <style type="text/css">

  .text_left_top
  {

   margin-bottom:20px;
      }
.text_left_top dl {

 width:674px;
    

}
.text_left_top .dl_top{background-color:#B8B8B8;  height:36px; display:block;}
.text_left_top dt.active {
 position:relative;
 color:#fff;
  font-weight:bold;
}
.text_left_top dt {
 padding:10px 50px;

 float:left;
  font-weight:bold;
 border-left:0;
 cursor:pointer;
  font-size:20px;
   color:#E7E7E7;
}

.text_left_top .dl_bottom dd{ height:240px;}
.text_left_top .dl_bottom img{ width:674px; height:240px;}
.text_left_top .dt_left{ margin-left:50px; }
.text_left_top dd {
 clear:both;
 width:100%;
 border-left:0;
 border:1px solid #dcdcdc;
 border-left:0;
 display:none;
}
</style>


</head>
<body>
    <form id="form1" runat="server">
     <uc1:head ID="head1" runat="server" />                                                    
     <center>
    <div class="birthday_body" style="margin-top:1px;" >  
    <div class="card_banner_01"></div>


     <div class="clear"></div>

    <div class="clear"></div>
       <div class="body_02">
          <div class="left_01">

          <div class="text_left_top">
          <dl class="dl_top" >
  <dt class="dt_left">影视</dt>
  <dt>活动</dt>
  <dt>促销</dt>
  </dl>
  <dl class="dl_bottom">
  <dd>
   <a href="#" ><img src="/cn/serviceImages/enjoyment_banner_01.jpg" alt="" /> </a>
  </dd>
  <dd>
  <a href="#" ><img src="/cn/serviceImages/festival_bg.jpg" alt="" /> </a>
  </dd>
  <dd>
  <a href="#" ><img src="/cn/serviceImages/insuring_banner_01.jpg" alt="" /> </a>
  </dd>
</dl>


<script type="text/javascript">
    $( document ).ready( function () {
        $( 'dt:first' ).addClass( 'active' );
        $( 'dd:first' ).css( 'display', 'block' );
        autoroll();
        hookThumb();
        startTab();
    } );
    var i = -1; //第i+1个tab开始
    var offset = 2500; //轮换时间
    var timer = null;
    function autoroll() {
        n = $( 'dt' ).length - 1;
        i++;
        if ( i > n ) {
            i = 0;
        }
     
        slide( i );
        timer = window.setTimeout( autoroll, offset );
    }
    function slide( i ) {

        $( 'dt' ).eq( i ).addClass( 'active' ).siblings().removeClass( 'active' );
        $( 'dd' ).eq( i ).css( 'display', 'block' ).siblings( 'dd' ).css( 'display', 'none' );

    }
    function hookThumb() {
        $( 'dt' ).hover(  
                
  function () {
      if ( timer ) {
       
          clearTimeout( timer );
          i = $( this ).prevAll().length;
          slide( i );
      }
  },
  function () {

      timer = window.setTimeout( autoroll, offset );
      this.blur();
      return false;
  }


);


}

function startTab() {

    i = $( this ).prevAll().length;
    slide( i );
}
</script>
          </div>
          <div class="text_button">
                <div class="title"><img src="/cn/serviceImages/life_title02.jpg" alt="" /> </div>
                 <div class="body">
                    <div class="text_01">
                     <ul>
                          <%= SbLeftBody01 %> 
                     </ul>
                    </div>
                    <div class="text_02">
                     <ul>
                         <%= SbLeftBody02 %> 
                     </ul>
                     </div>
                     <div class="text_03">
                     <ul>
                         <%= SbLeftBody02 %> 
                     </ul>
                     </div>
                </div>
                </div>
          </div>
          <div class="right_01">
            
              <div class="body"> 
              <div class="right_01_title">悠享方案排行榜</div>
              <ul>
                <li>
                 <div>
                    <img src="/cn/serviceImages/insuring_pic_01.jpg" alt="" />
                 </div>
                 <div>悠享方案排行榜</div>
                </li>
                <li>
                   <div>
                       <img src="/cn/serviceImages/insuring_pic_01.jpg" alt="" />
                   </div>
                   <div>悠享方案排行榜</div>
                </li>
              </ul>
                
                     
              
               </div>
            </div> 
       </div>
       <div class="clear"></div>



         <div id="tabbed_box_1" class="tabbed_box">
	
    <div class="tabbed_area">
    
    	<div class="tab_left">
        <div class="tab_left_title"></div>
        <ul class="tabs">
            <li><a title="content_1" class="tab active"><%= GoodsTitle01.ToString()%></a></li>
            <li><a  title="content_2" class="tab"><%= GoodsTitle02.ToString()%></a></li>
            <li><a  title="content_3" class="tab"><%= GoodsTitle03.ToString()%></a></li>
            <li><a   title="content_4" class="tab"><%= GoodsTitle04.ToString()%></a></li>
            <li><a   title="content_5" class="tab"><%= GoodsTitle05.ToString()%></a></li>
        </ul>
        </div>
        <div class="tab_right">
        
        <div id="content_1" class="content">
        	        <% = SGoodsHtml01.ToString()%>

        </div>
        <div id="content_2" class="content">
        	        <% = SGoodsHtml02.ToString()%>

        </div>
        <div id="content_3" class="content">
        	       <% = SGoodsHtml03.ToString()%>
        </div>
         <div id="content_4" class="content">
        	        <% = SGoodsHtml04.ToString()%>
        </div>
         <div id="content_5" class="content">
                 <% = SGoodsHtml05.ToString()%>
        </div>
        </div>
    
    </div>
   
 

</div>

 
 

    </div>
    </center>
   <uc2:bottom ID="bottom1" runat="server" /> 

    </form>

</body>
</html>


